<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: whitesmoke;
        }

        .box {
            position: relative;
            width: 700px;
            height: 700px;
            margin: 50px auto;
            background-color: white;
            border: 1px solid rgb(15, 224, 36);
        }

        h1 {
            position: absolute;
            top: 10px;
            left: 250px;
            padding: 30px;
            color: rgb(19, 214, 32);
        }

        [name] {
            outline: none;
            position: absolute;
            left: 250px;
            width: 220px;
            height: 30px;
        }

        .username {
            position: absolute;
            top: 130px;
        }

        .username span {
            position: absolute;
            width: 220px;
            height: 30px;
            top: 40px;
            left: 250px;
            color: red;
        }

        .phone {
            top: 200px;
        }

        .phone span {
            position: absolute;
            width: 220px;
            height: 30px;
            top: 240px;
            left: 250px;
            color: red;
        }

        .code {
            top: 270px;
        }

        .code span {
            position: absolute;
            width: 220px;
            height: 30px;
            top: 310px;
            left: 250px;
            color: red;
        }

        .vft {
            position: absolute;
            top: 275px;
            left: 390px;
        }

        .password {
            top: 340px;
        }

        .pwd span {
            position: absolute;
            width: 220px;
            height: 30px;
            top: 380px;
            left: 250px;
            color: red;
        }

        .password2 {
            top: 410px;
        }


        .pwd2 span {
            position: absolute;
            width: 220px;
            height: 30px;
            top: 450px;
            left: 250px;
            color: red;
        }

        .agree {
            font-size: 14PX;
            position: absolute;
            top: 480px;
            left: 250px;
        }

        .agree input {
            vertical-align: middle;
        }

        .agree a {
            text-decoration: none;
            color: black;
        }

        .agree a:hover {
            color: red;
        }

        .major {
            position: absolute;
            text-align: center;
            line-height: 40px;
            top: 520px;
            left: 250px;
            width: 220px;
            height: 40px;
            background-color: rgb(31, 220, 31);

        }

        .major a {
            text-decoration: none;
            color: white;
        }
    </style>

</head>

<body>
    <div class="box">
        <h1>新用户注册</h1>
        <div class="username">
            <input type="text" class="uname" name="uname" placeholder="设置用户名称">
            <span></span>
        </div>
        <div class="phone">
            <input type="text" class="phone" name="phone" placeholder="输入手机号">
            <span></span>
        </div>

        <div class="code">
            <input type="text" class="code" name="code" placeholder="输入验证码">
            <input type="button" class="vft" value="获取验证码" disabled>
            <span></span>
        </div>

        <div class="pwd">
            <input type="password" class="password" name="password" placeholder="设置6至20位数字、字母和符号组合">
            <span></span>
        </div>

        <div class="pwd2">
            <input type="password" class="password2" name="password2" placeholder="再次输入密码">
            <span></span>
        </div>

        <div class="agree">
            <input type="checkbox">我已同意<a href="用户协议.html" target="_blank">《用户协议》</a>
        </div>
        <form>
            <div class="major">
                <a href="登录界面.html">注册</a>
            </div>
        </form>
    </div>
    </div>
    <script>
        const user = [
            { username: 'zhangsan', password: '123456', phone: '13012345678' },
        ]
        localStorage.setItem('user', JSON.stringify(user))
        let randomCode;
        const uname = document.querySelector('.uname')
        const vft = document.querySelector('.vft')
        const codeInput = document.querySelector('.code .code')
        console.log(codeInput);
        uname.addEventListener('change', verifyName)
        function verifyName() {
            const span = uname.nextElementSibling
            const reg = /^[a-zA-Z0-9-_]{6,10}$/
            if (!reg.test(uname.value)) {
                span.innerHTML = '输入不合法,请输入6~10位'
                return false
            }
            span.innerHTML = ''

            return true
        }
        const phone = document.querySelector('.phone .phone')
        phone.addEventListener('change', verifyPhone)
        // ... existing code ...
        function verifyPhone() {
            const span = phone.nextElementSibling
            const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
            if (!reg.test(phone.value) || phone.value === '') {
                span.innerHTML = '手机号输入有误'
                return false
            }
            vft.disabled = false
            span.innerHTML = ''

            return true
        }
        vft.addEventListener('click', verifyVft)
        function verifyVft() {
            // 模拟发送验证码到手机，而不是直接 alert
            randomCode = Math.floor(Math.random() * (1000000 - 100000)) + 100000;
            alert(`验证码为：${randomCode}`);
            codeInput.value = randomCode;
            vft.disabled = true
            let i = 60
            let n = setInterval(function () {
                i--
                vft.value = `已发送(${i})`
                if (i === 0) {
                    clearInterval(n)
                    vft.disabled = false
                    vft.value = '重新获取'
                    // 重置验证码
                    randomCode = null;
                }
            }, 1000)
        }
        codeInput.addEventListener('change', verifyCode)
        function verifyCode() {
            const span = document.querySelector('.code span')
            span.innerHTML = ''
            return true
        }
        // ... existing code ...

        const pwd = document.querySelector('.password')
        pwd.addEventListener('change', verifyPwd)
        function verifyPwd() {
            const span = pwd.nextElementSibling
            const reg = /^[a-zA-Z0-9]{6,20}$/
            if (!reg.test(pwd.value)) {
                span.innerHTML = '请输入6~20位数字和字母组合'
                return false
            }
            span.innerHTML = ''

            return true
        }
        // ... existing code ...
        const pwd2 = document.querySelector('.password2')
        pwd2.addEventListener('change', verifyPwd2)
        function verifyPwd2() {
            const span = pwd2.nextElementSibling
            if (pwd2.value !== pwd.value) {
                span.innerHTML = '两次密码输入不一致'
                return false
            }
            span.innerHTML = ''
            return true
        }
        const form = document.querySelector('form')
        const agree = document.querySelector('.agree')
        const check = document.querySelector('input[type="checkbox"]')

        form.addEventListener('click', function (e) {

            if (check.checked === false) {
                e.preventDefault()
                return alert('请勾选同意协议')
            }
            if (!verifyName()) e.preventDefault()
            if (!verifyPhone()) e.preventDefault()
            if (!verifyPwd()) e.preventDefault()
            if (!verifyPwd2()) e.preventDefault()
            user=[{
                username: uname.value,
                password: pwd.value,
                phone: phone.value,
            }]
            localStorage.setItem('user', JSON.stringify(user))
        })
    </script>
</body>

</html>